<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta name="generator" content="HTML Tidy, see www.w3.org">
<title>BASIC DRAG-AND-DROP DIVS</title>
<meta http-equiv="Content-Type" content=
"text/html; charset=iso-8859-1">
<script type="text/javascript" language="javascript">
// start dragging
function startDrag(e){
    // determine event object
    if(!e){var e=window.event};
    // determine target element
    var targ=e.target?e.target:e.srcElement;
    if(targ.className!='draggable'){return};
    // calculate event X,Y coordinates
    offsetX=e.clientX;
    offsetY=e.clientY;
    // assign default values for top and left properties
    if(!targ.style.left){targ.style.left='0px'};
    if(!targ.style.top){targ.style.top='0px'};
    // calculate integer values for top and left properties
    coordX=parseInt(targ.style.left);
    coordY=parseInt(targ.style.top);
    drag=true;
    // move div element
    document.onmousemove=dragDiv;
}
// continue dragging
function dragDiv(e){
    if(!drag){return};
    if(!e){var e=window.event};
    var targ=e.target?e.target:e.srcElement;
    // move div element
    targ.style.left=coordX+e.clientX-offsetX+'px';
    targ.style.top=coordY+e.clientY-offsetY+'px';
    return false;
}
// stop dragging
function stopDrag(){
    drag=false;
}
window.onload=function(){
    document.onmousedown=startDrag;
    document.onmouseup=stopDrag;
}
</script>

<style type="text/css">
.draggable {
    position: relative;
    width: 250px;
    height: 200px;
    background-color: #ccc;
    border: 1px solid #000;
}
</style>
</head>
<body>
<div class="draggable">This is a dragging DIV element</div>

<div class="draggable">This is a dragging DIV element</div>
</body>
</html>

